<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="逯灿灿">
    <title>环形倒计时</title>
    <style>
    * {
        box-sizing: border-box;
    }

    body {
        padding: 20px;
        color: #fff;
        background-color: #111;
    }

    .timer-group {
        height: 400px;
        margin: 0 auto;
        position: relative;
        width: 400px;
    }

    .timer {
        border-radius: 50%;
        height: 100px;
        overflow: hidden;
        position: absolute;
        width: 100px;
    }

    .timer:after {
    /*遮罩小  */
        background-color: #111;
        border-radius: 50%;
        content: "";
        display: block;
        height: 80px;
        left: 10px;
        position: absolute;
        width: 80px;
        top: 10px;
    }

    .timer .hand {
        float: left;
        height: 100%;
        overflow: hidden;
        position: relative;
        width: 50%;
    }

    .timer .hand span {
        border: 50px solid rgba(0, 255, 255, .4);
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-radius: 50%;
        display: block;
        height: 0;
        position: absolute;
        right: 0;
        top: 0;
        transform: rotate(225deg);
        width: 0;
    }

    .timer .hand:first-child {
        transform: rotate(180deg);
    }

    .timer .hand span {
        animation-duration: 4s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    .timer .hand:first-child span {
        animation-name: spin1;
    }

    .timer .hand:last-child span {
        animation-name: spin2; 
    }

    .timer.hour {
        background: rgba(0, 0, 0, .3);
        height: 400px;
        left: 0;
        width: 400px;
        top: 0;
    }

    .timer.hour .hand span {
        animation-duration: 3600s;
        border-top-color: rgba(255, 0, 255, .4);
        border-right-color: rgba(255, 0, 255, .4);
        border-width: 200px;
    }

    .timer.hour:after {
        height: 360px;
        left: 20px;
        width: 360px;
        top: 20px;
    }

    .timer.minute {
        background: rgba(0, 0, 0, .2);
        height: 350px;
        left: 25px;
        width: 350px;
        top: 25px;
    }

    .timer.minute .hand span {
        animation-duration: 60s;
        border-top-color: rgba(0, 255, 255, .4);
        border-right-color: rgba(0, 255, 255, .4);
        border-width: 175px;
    }

    .timer.minute:after {
        height: 310px;
        left: 20px;
        width: 310px;
        top: 20px;
    }

    .timer.second {
        background: rgba(0, 0, 0, .2);
        height: 300px;
        left: 50px;
        width: 300px;
        top: 50px;
    }

    .timer.second .hand span {
        animation-duration: 1s;
        border-top-color: rgba(255, 255, 255, .15);
        border-right-color: rgba(255, 255, 255, .15);
        border-width: 150px;
    }

    .timer.second:after {
        height: 296px;
        left: 2px;
        width: 296px;
        top: 2px;
    }

    .face {
        background: rgba(0, 0, 0, .1);
        border-radius: 50%;
        height: 296px;
        left: 52px;
        padding: 165px 40px 0;
        position: absolute;
        width: 296px;
        text-align: center;
        top: 52px;
    }

    .face h2 {
        font-weight: 300; 
    }

    .face p {
        border-radius: 20px;
        font-size: 30px;
        font-weight: 400;
        position: absolute;
        top: 50px;
        width: 260px;
        left: 20px;
    }
    .face p span{
        display: inline-block;
        width: 50px;
        padding: 0 10px;
        margin: 0 10px;
        border: 2px solid #999;
        background-color: #fff;
        color: #000; 
	}
    #button{
        width: 220px;
        margin: 50px auto; 
        display: flex;
        justify-content: space-between;
    }
    #btn1{
        background-color: #990066;
        border: none;
    }
    #btn2{
        background-color: #990066;
        border: none;
    }
    @keyframes spin1 {
    0% {
        transform: rotate(225deg);
    }
    50% {
        transform: rotate(225deg);
    }
    100% {
        transform: rotate(405deg);
    }
    }

    @keyframes spin2 {
    0% {
        transform: rotate(225deg);
    }
    50% {
        transform: rotate(405deg);
    }
    100% {
        transform: rotate(405deg);
    }
    }
    </style>
</head>

<body>
    <div class="timer-group">
        <div class="timer second">
            <div class="hand"><span></span></div>
            <div class="hand"><span></span></div>
        </div>
        <div class="face">
            <h2>距离双十一时间</h2>
            <p id="lazy"><span>00</span>天<span>00</span>时<span>00</span>分<span>00</span>秒</p>  
        </div>
    </div>
    <div id="button">
        <button type="button" id="btn1">暂停倒计时</button>
        <button type="button" id="btn2">重新开始倒计时</button>
    </div>
</body>

</html>
<script type="text/javascript">
    var spans = document.querySelector('#lazy').querySelectorAll('span'); 
    var btn1 = document.querySelector('#btn1');
    var btn2 = document.querySelector('#btn2');

	var target_time = new Date('2017-11-11 00:00:00').getTime();
	// console.log(target_time);
	// 当前的时间
	var now_time = new Date().getTime();
	// console.log('1='+target_time+' 2='+now_time);
	
	// 时间差 
	var times = Math.floor((target_time - now_time) / 1000);
	// console.log(times);

	var MIN = 60;
    var HOUR = MIN * 60;
    var DAY = HOUR * 24;
    
    function num(n) {
        var str = '0' + (n > 0 ? n : 0);
        // console.log(str)
        return str.substr(-2);
    };
    // // 从字符串尾部开始计算，-1指字符串最后一个字符，-2指倒数第二个字符...依次类推
    // console.log('12345'.substr(-2));
    // // 默认指代从start位置截取到字符串末尾
    // console.log('12345'.substr(2));
	
	function timer(){
        var days = Math.floor(times / DAY);
        var hours = Math.floor(times % DAY / HOUR);
        var minutes = Math.floor(times % HOUR / MIN);
        var seconds = Math.floor(times % MIN);
         
        spans[0].innerHTML = num(days);
        spans[1].innerHTML = num(hours);
        spans[2].innerHTML = num(minutes);
        spans[3].innerHTML = num(seconds);

    };
    var reset = setInterval(keyer,1000);
    function keyer(){
        times -= 1;
        timer();
        if(times <= 0){
            clearInterval(reset);
        }
    }
    btn1.onclick = function(){
        clearInterval(reset);
        reset = null;
    }
    btn2.onclick = function(){
        target_time = new Date('2017-11-11 00:00:00').getTime();
        now_time = new Date().getTime();
        times = Math.floor((target_time - now_time) / 1000);
        if(reset)return;
        reset = setInterval(keyer,1000);
    }
    
</script>